<template>
  <div class="tabel_Background">
    <div class="tabel_Background-wra">
      <div id="title">
        <span class="title-text">{{ title }}</span>
      </div>
      <div
        class="container"
        ref="usage_ref"
        style="width: 100%;height: 80%;"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Mtable",
  data() {
    return {
      chartInstance: null,
      allData: null,

      chartData: {
        yData1: [
          [21.74],
          [21.64],
          [21.41],
          [21.17],
          [21.03],
          [20.92],
          [20.79],
          [20.68],
          [20.56],
          [20.39],
          [20.21],
          [20.06],
          [19.9],
          [19.76],
          [19.64],
          [19.53],
          [19.41],
          [19.35],
          [19.23],
          [19.08],
          [18.92],
          [18.84],
          [18.7],
          [18.53],
          [18.47],
          [18.34],
          [18.23],
          [18.1],
          [17.94],
          [17.87],
          [17.76],
          [17.68],
          [17.57],
          [17.49],
          [17.38],
          [17.32],
          [17.22],
          [17.15],
          [17.04],
          [16.98],
          [16.9],
          [16.82],
          [16.71],
          [16.64],
          [16.56],
          [16.47],
          [16.39],
          [16.29],
          [16.21],
          [16.1],
          [16.06],
          [15.98],
          [15.89],
          [15.84],
          [15.74],
          [15.71],
          [15.65],
          [15.57],
          [15.52],
          [15.49],
          [15.42],
          [15.38],
          [15.31],
          [15.26],
          [15.21],
          [15.15],
          [15.11],
          [15.05],
          [14.99],
          [14.96],
          [14.89],
          [14.84],
          [14.79],
          [14.72],
          [14.67],
          [14.62],
          [14.58],
          [14.53],
          [14.48],
          [14.45],
          [14.41],
          [14.37],
          [14.35],
          [14.33],
          [14.29],
          [14.27],
          [14.25],
          [14.18],
          [14.2],
          [14.15],
          [14.14],
          [14.1],
          [14.08],
          [14.05],
          [14.01],
          [13.97],
          [13.95],
          [13.92],
          [13.89],
          [13.84],
          [13.79],
          [13.74],
          [13.69],
          [13.63],
          [13.57],
          [13.52],
          [13.45],
          [13.39],
          [13.35],
          [13.3],
          [13.19],
          [13.17],
          [13.12],
          [13.06],
          [13.0],
          [12.96],
          [12.91],
          [12.84],
          [12.8],
          [12.74],
          [12.68],
          [12.6],
          [12.57],
          [12.51],
          [12.45],
          [12.39],
          [12.35],
          [12.31],
          [12.27],
          [12.22],
          [12.18],
          [12.16],
          [12.11],
          [12.05],
          [12.02],
          [11.97],
          [11.95],
          [11.89],
          [11.86],
          [11.83],
          [11.79],
          [11.77],
          [11.77],
          [11.72],
          [11.7],
          [11.67],
          [11.64],
          [11.61],
          [11.57],
          [11.54],
          [11.52],
          [11.49],
          [11.45],
          [11.44],
          [11.41],
          [11.41],
          [11.36],
          [11.36],
          [11.32],
          [11.29],
          [11.28],
          [11.26],
          [11.23],
          [11.2],
          [11.19],
          [11.16],
          [11.13],
          [11.08],
          [11.07],
          [11.04],
          [11.0],
          [10.95],
          [10.91],
          [10.88],
          [10.85],
          [10.8],
          [10.78],
          [10.74],
          [10.68],
          [10.64],
          [10.62],
          [10.58],
          [10.54],
          [10.5],
          [10.49],
          [10.45],
          [10.4],
          [10.38],
          [10.32],
          [10.32],
          [10.26],
          [10.22],
          [10.2],
          [10.14],
          [10.06],
          [10.03],
          [10.0],
          [9.95],
          [9.88],
          [9.87],
          [9.83],
          [9.78],
          [9.71],
          [9.69],
          [9.64],
          [9.61],
          [9.55],
          [9.52],
          [9.49],
          [9.43],
          [9.37],
          [9.34],
          [9.28],
          [9.25],
          [9.18],
          [9.18],
          [9.14],
          [9.09],
          [9.07],
          [9.04],
          [9.0],
          [8.96],
          [8.94],
          [8.9],
          [8.86],
          [8.81],
          [8.77],
          [8.74],
          [8.68],
          [8.66],
          [8.61],
          [8.54],
          [8.53],
          [8.49],
          [8.44],
          [8.4],
          [8.36],
          [8.34],
          [8.27],
          [8.25],
          [8.19],
          [8.15],
          [8.11],
          [8.06],
          [8.03],
          [8.0],
          [7.95],
          [7.91],
          [7.87],
          [7.82],
          [7.8],
          [7.76],
          [7.74],
          [7.69],
          [7.66],
          [7.64],
          [7.61],
          [7.6],
          [7.55],
          [7.54],
          [7.51],
          [7.47],
          [7.46],
          [7.43],
          [7.42],
          [7.38],
          [7.35],
          [7.33],
          [7.29],
          [7.3],
          [7.3],
          [7.26],
          [7.24],
          [7.23],
          [7.2],
          [7.18],
          [7.16],
          [7.15],
          [7.14],
          [7.12],
          [7.1],
          [7.09],
          [7.09],
          [7.07],
          [7.04],
          [7.04],
          [7.04],
          [7.03],
          [7.01],
          [7.01],
          [6.98],
          [6.98],
          [6.95],
          [6.95],
          [6.93],
          [6.93],
          [6.94],
          [6.91],
          [6.91],
          [6.93],
          [6.93],
          [6.93],
          [6.94],
          [6.94],
          [6.96],
          [6.98],
          [6.98],
          [6.99],
          [7.01],
          [7.01],
          [7.01],
          [7.02],
          [7.05],
          [7.05],
          [7.04],
          [7.07],
          [7.07],
          [7.08],
          [7.1],
          [7.1],
          [7.12],
          [7.11],
          [7.12],
          [7.13],
          [7.14],
          [7.15],
          [7.17],
          [7.19],
          [7.18],
          [7.18],
          [7.22],
          [7.21],
          [7.22],
          [7.23],
          [7.23],
          [7.25],
          [7.24],
          [7.25],
          [7.25],
          [7.25],
          [7.29],
          [7.26],
          [7.29],
          [7.28],
          [7.29],
          [7.3],
          [7.32],
          [7.32],
          [7.33],
          [7.32],
          [7.36],
          [7.36],
          [7.37],
          [7.41],
          [7.42],
          [7.43],
          [7.45],
          [7.47],
          [7.5],
          [7.48],
          [7.5],
          [7.52],
          [7.53],
          [7.54],
          [7.54],
          [7.57],
          [7.57],
          [7.59],
          [7.6],
          [7.56],
          [7.63],
          [7.64],
          [7.64],
          [7.64],
          [7.66],
          [7.67],
          [7.68],
          [7.68],
          [7.67],
          [7.68],
          [7.68],
          [7.68],
          [7.68],
          [7.69],
          [7.7],
          [7.7],
          [7.71],
          [7.7],
          [7.71],
          [7.71],
          [7.71],
          [7.71],
          [7.7],
          [7.7],
          [7.71],
          [7.73],
          [7.71],
          [7.7],
          [7.71],
          [7.7]
        ],
        yData2: [
          [7],
          [28],
          [70],
          [133],
          [189],
          [231],
          [266],
          [280],
          [301],
          [329],
          [350],
          [378],
          [399],
          [420],
          [427],
          [434],
          [448],
          [455],
          [476],
          [490],
          [511],
          [525],
          [546],
          [560],
          [574],
          [588],
          [602],
          [616],
          [637],
          [651],
          [665],
          [679],
          [693],
          [707],
          [721],
          [735],
          [749],
          [756],
          [770],
          [784],
          [791],
          [805],
          [812],
          [826],
          [840],
          [854],
          [868],
          [882],
          [896],
          [910],
          [924],
          [938],
          [952],
          [966],
          [980],
          [994],
          [1001],
          [1015],
          [1029],
          [1036],
          [1050],
          [1064],
          [1071],
          [1085],
          [1099],
          [1106],
          [1113],
          [1120],
          [1134],
          [1148],
          [1155],
          [1163],
          [1177],
          [1184],
          [1191],
          [1198],
          [1205],
          [1219],
          [1219],
          [1226],
          [1233],
          [1240],
          [1240],
          [1240],
          [1254],
          [1254],
          [1247],
          [1247],
          [1247],
          [1254],
          [1254],
          [1261],
          [1254],
          [1254],
          [1254],
          [1261],
          [1254],
          [1261],
          [1254],
          [1261],
          [1268],
          [1275],
          [1282],
          [1289],
          [1296],
          [1296],
          [1303],
          [1317],
          [1324],
          [1338],
          [1345],
          [1359],
          [1366],
          [1380],
          [1380],
          [1394],
          [1401],
          [1408],
          [1415],
          [1422],
          [1429],
          [1436],
          [1443],
          [1450],
          [1450],
          [1457],
          [1464],
          [1471],
          [1478],
          [1478],
          [1485],
          [1485],
          [1492],
          [1499],
          [1506],
          [1506],
          [1513],
          [1513],
          [1520],
          [1520],
          [1527],
          [1527],
          [1534],
          [1541],
          [1541],
          [1548],
          [1555],
          [1555],
          [1562],
          [1555],
          [1569],
          [1562],
          [1569],
          [1569],
          [1569],
          [1576],
          [1569],
          [1576],
          [1576],
          [1583],
          [1576],
          [1576],
          [1576],
          [1576],
          [1569],
          [1576],
          [1569],
          [1569],
          [1569],
          [1569],
          [1562],
          [1569],
          [1562],
          [1562],
          [1555],
          [1562],
          [1555],
          [1562],
          [1562],
          [1562],
          [1562],
          [1569],
          [1562],
          [1569],
          [1562],
          [1569],
          [1562],
          [1569],
          [1569],
          [1569],
          [1562],
          [1569],
          [1569],
          [1562],
          [1562],
          [1562],
          [1569],
          [1562],
          [1569],
          [1569],
          [1569],
          [1576],
          [1576],
          [1583],
          [1590],
          [1590],
          [1597],
          [1597],
          [1604],
          [1604],
          [1611],
          [1618],
          [1625],
          [1625],
          [1632],
          [1639],
          [1646],
          [1646],
          [1660],
          [1667],
          [1674],
          [1688],
          [1688],
          [1695],
          [1702],
          [1709],
          [1723],
          [1723],
          [1730],
          [1737],
          [1751],
          [1758],
          [1765],
          [1772],
          [1779],
          [1786],
          [1793],
          [1800],
          [1807],
          [1814],
          [1814],
          [1821],
          [1835],
          [1842],
          [1849],
          [1856],
          [1863],
          [1870],
          [1884],
          [1891],
          [1898],
          [1905],
          [1912],
          [1919],
          [1926],
          [1933],
          [1940],
          [1947],
          [1954],
          [1961],
          [1968],
          [1982],
          [1989],
          [1996],
          [2003],
          [2010],
          [2017],
          [2024],
          [2031],
          [2038],
          [2052],
          [2052],
          [2066],
          [2073],
          [2080],
          [2087],
          [2094],
          [2101],
          [2108],
          [2122],
          [2122],
          [2129],
          [2129],
          [2136],
          [2143],
          [2143],
          [2150],
          [2157],
          [2164],
          [2164],
          [2164],
          [2171],
          [2178],
          [2178],
          [2178],
          [2185],
          [2185],
          [2192],
          [2185],
          [2192],
          [2192],
          [2192],
          [2199],
          [2199],
          [2206],
          [2206],
          [2206],
          [2213],
          [2213],
          [2213],
          [2227],
          [2227],
          [2227],
          [2241],
          [2241],
          [2241],
          [2248],
          [2255],
          [2262],
          [2269],
          [2269],
          [2283],
          [2290],
          [2297],
          [2311],
          [2311],
          [2318],
          [2325],
          [2332],
          [2339],
          [2346],
          [2353],
          [2360],
          [2367],
          [2374],
          [2381],
          [2388],
          [2395],
          [2402],
          [2409],
          [2416],
          [2423],
          [2430],
          [2430],
          [2444],
          [2451],
          [2451],
          [2465],
          [2472],
          [2479],
          [2479],
          [2493],
          [2500],
          [2507],
          [2514],
          [2521],
          [2528],
          [2535],
          [2549],
          [2556],
          [2563],
          [2570],
          [2577],
          [2584],
          [2591],
          [2598],
          [2612],
          [2619],
          [2626],
          [2640],
          [2647],
          [2661],
          [2668],
          [2675],
          [2682],
          [2696],
          [2703],
          [2710],
          [2724],
          [2731],
          [2738],
          [2745],
          [2759],
          [2766],
          [2773],
          [2780],
          [2787],
          [2794],
          [2801],
          [2808],
          [2815],
          [2822],
          [2829],
          [2836],
          [2836],
          [2850],
          [2857],
          [2864],
          [2864],
          [2871]
        ],

        yData3: [
          [16.31],
          [16.23],
          [16.06],
          [15.88],
          [15.77],
          [15.69],
          [15.6],
          [15.51],
          [15.42],
          [15.3],
          [15.16],
          [15.05],
          [14.92],
          [14.82],
          [14.73],
          [14.65],
          [14.56],
          [14.51],
          [14.42],
          [14.31],
          [14.19],
          [14.13],
          [14.02],
          [13.9],
          [13.85],
          [13.75],
          [13.67],
          [13.58],
          [13.46],
          [13.4],
          [13.32],
          [13.26],
          [13.17],
          [13.11],
          [13.04],
          [12.99],
          [12.92],
          [12.86],
          [12.78],
          [12.74],
          [12.67],
          [12.62],
          [12.53],
          [12.48],
          [12.42],
          [12.35],
          [12.29],
          [12.22],
          [12.16],
          [12.08],
          [12.05],
          [11.99],
          [11.92],
          [11.88],
          [11.81],
          [11.79],
          [11.74],
          [11.68],
          [11.64],
          [11.62],
          [11.57],
          [11.54],
          [11.48],
          [11.45],
          [11.41],
          [11.36],
          [11.33],
          [11.29],
          [11.25],
          [11.22],
          [11.17],
          [11.13],
          [11.09],
          [11.04],
          [11.0],
          [10.96],
          [10.93],
          [10.89],
          [10.86],
          [10.84],
          [10.81],
          [10.78],
          [10.76],
          [10.75],
          [10.72],
          [10.7],
          [10.69],
          [10.63],
          [10.65],
          [10.61],
          [10.6],
          [10.57],
          [10.56],
          [10.54],
          [10.51],
          [10.48],
          [10.46],
          [10.44],
          [10.42],
          [10.38],
          [10.35],
          [10.31],
          [10.27],
          [10.23],
          [10.18],
          [10.14],
          [10.09],
          [10.04],
          [10.02],
          [9.97],
          [9.9],
          [9.88],
          [9.84],
          [9.8],
          [9.75],
          [9.72],
          [9.68],
          [9.63],
          [9.6],
          [9.55],
          [9.51],
          [9.45],
          [9.43],
          [9.39],
          [9.34],
          [9.29],
          [9.26],
          [9.23],
          [9.2],
          [9.17],
          [9.13],
          [9.12],
          [9.08],
          [9.04],
          [9.01],
          [8.97],
          [8.96],
          [8.91],
          [8.89],
          [8.87],
          [8.84],
          [8.83],
          [8.83],
          [8.79],
          [8.77],
          [8.75],
          [8.73],
          [8.71],
          [8.68],
          [8.65],
          [8.64],
          [8.62],
          [8.59],
          [8.58],
          [8.56],
          [8.55],
          [8.52],
          [8.52],
          [8.49],
          [8.47],
          [8.46],
          [8.44],
          [8.42],
          [8.4],
          [8.39],
          [8.37],
          [8.35],
          [8.31],
          [8.3],
          [8.28],
          [8.25],
          [8.21],
          [8.18],
          [8.16],
          [8.14],
          [8.1],
          [8.08],
          [8.06],
          [8.01],
          [7.98],
          [7.97],
          [7.94],
          [7.91],
          [7.88],
          [7.86],
          [7.84],
          [7.8],
          [7.78],
          [7.74],
          [7.74],
          [7.69],
          [7.67],
          [7.65],
          [7.6],
          [7.54],
          [7.52],
          [7.5],
          [7.47],
          [7.41],
          [7.4],
          [7.37],
          [7.34],
          [7.28],
          [7.27],
          [7.23],
          [7.21],
          [7.16],
          [7.14],
          [7.12],
          [7.07],
          [7.03],
          [7.0],
          [6.96],
          [6.94],
          [6.89],
          [6.88],
          [6.85],
          [6.82],
          [6.8],
          [6.78],
          [6.75],
          [6.72],
          [6.7],
          [6.67],
          [6.65],
          [6.61],
          [6.58],
          [6.55],
          [6.51],
          [6.5],
          [6.46],
          [6.41],
          [6.4],
          [6.37],
          [6.33],
          [6.3],
          [6.27],
          [6.25],
          [6.2],
          [6.19],
          [6.14],
          [6.11],
          [6.08],
          [6.04],
          [6.02],
          [6.0],
          [5.96],
          [5.93],
          [5.91],
          [5.87],
          [5.85],
          [5.82],
          [5.8],
          [5.76],
          [5.74],
          [5.73],
          [5.71],
          [5.7],
          [5.66],
          [5.65],
          [5.64],
          [5.6],
          [5.59],
          [5.57],
          [5.56],
          [5.54],
          [5.52],
          [5.5],
          [5.47],
          [5.48],
          [5.47],
          [5.44],
          [5.43],
          [5.42],
          [5.4],
          [5.39],
          [5.37],
          [5.36],
          [5.36],
          [5.34],
          [5.33],
          [5.32],
          [5.31],
          [5.3],
          [5.28],
          [5.28],
          [5.28],
          [5.27],
          [5.25],
          [5.25],
          [5.23],
          [5.24],
          [5.21],
          [5.21],
          [5.2],
          [5.2],
          [5.2],
          [5.18],
          [5.19],
          [5.2],
          [5.19],
          [5.2],
          [5.2],
          [5.21],
          [5.22],
          [5.23],
          [5.23],
          [5.24],
          [5.26],
          [5.26],
          [5.26],
          [5.27],
          [5.29],
          [5.29],
          [5.28],
          [5.3],
          [5.3],
          [5.31],
          [5.32],
          [5.32],
          [5.34],
          [5.33],
          [5.34],
          [5.35],
          [5.36],
          [5.36],
          [5.38],
          [5.4],
          [5.38],
          [5.39],
          [5.41],
          [5.4],
          [5.41],
          [5.42],
          [5.43],
          [5.44],
          [5.43],
          [5.44],
          [5.44],
          [5.44],
          [5.47],
          [5.45],
          [5.47],
          [5.46],
          [5.46],
          [5.47],
          [5.49],
          [5.49],
          [5.5],
          [5.49],
          [5.52],
          [5.52],
          [5.53],
          [5.56],
          [5.57],
          [5.58],
          [5.58],
          [5.6],
          [5.63],
          [5.61],
          [5.63],
          [5.64],
          [5.65],
          [5.65],
          [5.66],
          [5.68],
          [5.68],
          [5.69],
          [5.7],
          [5.67],
          [5.72],
          [5.73],
          [5.73],
          [5.73],
          [5.74],
          [5.75],
          [5.76],
          [5.76],
          [5.75],
          [5.76],
          [5.76],
          [5.76],
          [5.76],
          [5.77],
          [5.78],
          [5.77],
          [5.79],
          [5.77],
          [5.78],
          [5.78],
          [5.79],
          [5.78],
          [5.77],
          [5.78],
          [5.78],
          [5.8],
          [5.79],
          [5.78],
          [5.78],
          [5.78]
        ]
      },
      option: {
        series: [
          {
            type: "gauge",
            min: 0,
            max: 25,
            radius: "80%",
            center: ["17%", "55%"],
            axisLine: {
              lineStyle: {
                width: 25,
                color: [
                  [0.68, "#00aa00"],
                  [0.88, "#c5b802"],
                  [1, "#ff0606"]
                ]
              }
            },
            pointer: {
              itemStyle: {
                color: "inherit"
              }
            },
            axisTick: {
              distance: -30,
              length: 8,
              lineStyle: {
                color: "#fff",
                width: 2
              }
            },
            splitLine: {
              distance: -30,
              length: 30,
              lineStyle: {
                color: "#fff",
                width: 4
              }
            },
            axisLabel: {
              color: "inherit",
              distance: 35,
              fontSize: 9
            },
            detail: {
              valueAnimation: true,
			  offsetCenter: [0, "70%"], //设置位置
              formatter: "{value} kN",
              color: "inherit",
              fontSize: 15
            },
            data: [
              {
                value: 12,
                name: "井口张力(kN)"
              }
            ],
            title: {
              offsetCenter: [0, "90%"], //设置位置
              color: "#fff",
              fontWeight: "bolder",
              fontSize: 16
            }
          },
          {
            type: "gauge",
            min: 0,
            max: 6000,
            radius: "80%",
            center: ["52%", "55%"],
            axisLine: {
              lineStyle: {
                width: 25,
                color: [
                  [0.75, "#00aa00"],
                  [0.9167, "#ccbf02"],
                  [1, "#ff0606"]
                ]
              }
            },
            pointer: {
              itemStyle: {
                color: "inherit"
              }
            },
            axisTick: {
              distance: -30,
              length: 8,
              lineStyle: {
                color: "#fff",
                width: 2
              }
            },
            splitLine: {
              distance: -30,
              length: 30,
              lineStyle: {
                color: "#fff",
                width: 4
              }
            },
            axisLabel: {
              color: "inherit",
              distance: 30,
              fontSize: 9
            },
            detail: {
              valueAnimation: true,
              formatter: "{value} m/h",
              color: "inherit",
			  offsetCenter: [0, "70%"], //设置位置
              fontSize: 16
            },
            data: [
              {
                value: 4601,
                name: "绞车速度(m/h)"
              }
            ],
            title: {
              offsetCenter: [0, "90%"], //设置位置
              color: "#fff",
              fontWeight: "bolder",
              fontSize: 16
            }
          },
          {
            type: "gauge",
            min: 0,
            max: 20,
            radius: "80%",
            center: ["85%", "55%"],
            axisLine: {
              lineStyle: {
                width: 25,
                color: [
                  [0.25, "#00aa00"],
                  [0.5, "#ccbf02"],
                  [1, "#ff0606"]
                ]
              }
            },
            pointer: {
              itemStyle: {
                color: "inherit"
              }
            },
            axisTick: {
              distance: -30,
              length: 8,
              lineStyle: {
                color: "#fff",
                width: 2
              }
            },
            splitLine: {
              distance: -30,
              length: 30,
              lineStyle: {
                color: "#fff",
                width: 4
              }
            },
            axisLabel: {
              color: "inherit",
              distance: 35,
              fontSize: 11
            },
            detail: {
              valueAnimation: true,
              formatter: "{value} kN",
              color: "inherit",
			  offsetCenter: [0, "70%"], //设置位置
              fontSize: 15
            },
            data: [
              {
                value: 10,
                name: "缆头张力(kN)"
              }
            ],
            title: {
              offsetCenter: [0, "90%"], //设置位置
              color: "#fff",
              fontWeight: "bolder",
              fontSize: 16
            }
          }
        ]
      }
    };
  },
  mounted() {
    this.refreshData();
    this.initChart();
  },
  methods: {
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.usage_ref);
      this.chartInstance.setOption(this.option);
    },
    refreshData() {
      //横轴数据
      let yData1 = this.chartData.yData1;
      let yData2 = this.chartData.yData2;
      let yData3 = this.chartData.yData3;
      console.log(yData1);
      var series1 = this.option.series[0];
      var series2 = this.option.series[1];
      var series3 = this.option.series[2];
      console.log(series3);
      for (let i = 0; i < yData1.length; i++) {
        //此处使用let是关键，也可以使用闭包。原理不再赘述
        setTimeout(() => {
          series1.data[0].value = yData1[i];
          series2.data[0].value = yData2[i];
          series3.data[0].value = yData3[i];
          this.chartInstance.setOption(this.option);
        }, 2000 * i); //此处要理解为什么是1000*i
      }
    }
  },
  props: {
    title: String
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.container {
  width: 6.75rem;
  height: 110%;
  // background-color: red;
  /* background-color: #867474; */
}

.tabel_Background {
  margin-bottom: 5px;
  width: 98%; //3.02rem;
  min-width: 2.96rem;
  height: 49%;
  margin-left: 1%;
  box-sizing: border-box;
}

.tabel_Background-wra {
  width: 100%; //3.02rem;
  min-width: 2.96rem;
  height: 100%;
  // border: 1px solid rgb(12, 50, 107);
  background-image: url("../../assets/bg_4@2x.png");
  // background-image: url('./../../../assets/mobile/pre-share-page@2x.png');
  background-repeat: no-repeat;
  background-size: 100% 100%; // contain; // cover;
  padding: 2%;
  box-sizing: border-box;
}

#title {
  width: 23%;
  height: 10%;
  min-width: 2.96rem;
  text-align: center;
  font-size: 6px;
  background-image: url("../../assets/title_outline@2x.png");
  background-repeat: no-repeat;
  background-size: 100% 100%; //cover;
  position: relative;
}

.title-text {
  position: absolute;
  left: 5%;
  top: 17%;
  color: #21beeb;
  font-weight: bold;
}
</style>
